import React, { useEffect, useState, useRef } from "react";
import { backgroundObj, setSessionItem } from '@/utils/utils';
import { View, Button } from '@tarojs/components'
import { Space, PopUp } from '@/components/UiComponents'
import Router from '@/utils/router'
import "./index.scss";
export default (props) => {
  const { visible = {}, onClose, formData, hpFlag = '0' } = props;
  const { show = false, detail = [] } = visible
  const Card = (props) => {
    const { data, index } = props
    const { goodsName, liveStock, cover, commerceGoodsId, goodsType, livePrice } = data
    return <View className="liveContain_card_box" onClick={() => {
      setSessionItem({ ...formData })
      Router('shopDetail', {
        args: {
          goodsId: commerceGoodsId,
          ...formData,
          linkType: 'pay'
        }
      })
    }
    }>
      <View className="liveContain_card_img" style={backgroundObj(cover)}>
        <View className="liveContain_cardProfile_count">{index + 1}</View>
        {liveStock > 0 ? null : <View className="liveContain_cardProfile_stock"></View>}
      </View>
      <View className="liveContain_card_body">
        <View className="liveContain_card_title"><View className="liveContain_card_tagInfo" style={{ '--text-color': '#ffffff', marginRight: 4 }} color='#FF4901'>直播专享</View>{goodsName}</View>
        <View className="liveContain_card_price">
          <View className="liveContain_card_priceLeft">{livePrice || 0}</View>
          <Button disabled={liveStock == 0} className="liveContain_card_priceRight">{liveStock === 0 ? '已售罄' : '马上抢'}</Button>
        </View>
      </View>
    </View>
  }
  const ref = useRef(null)
  return (
    <Space direction='vertical'>
      <View style={{ position: 'relative' }} ref={ref}>
        <PopUp position={hpFlag === '1' ? 'right' : 'bottom'} disableBodyScroll={false} getContainer={null} onMaskClick={() => {
          onClose()
        }} onClose={() => onClose()} visible={show}>
          <View onClick={(e) => { e.stopPropagation() }} className={hpFlag === '1' ? "liveContain_box liveContain_box_hp" : "liveContain_box"}>
            <View className="liveContain_title_info">全部</View>
            <View className="liveContain_content">
              {detail.map((item, index) => {
                return <Card data={item} index={index} key={index}></Card>
              })}
              <View className="liveContain_height"></View>
            </View>

          </View>
        </PopUp>
      </View>

    </Space>

  );
};
